<template>
  <div class=''>
    <!-- 面包屑导航区域 -->
    <Bootstrap v-bind:BootstrapTitle="BootstrapTitle"></Bootstrap>
    <!--卡片 -->
    <!-- 编辑对话框 -->
    <el-dialog title="修改商品信息" :visible.sync="dialogVisible" width="50%" @close="xiugaiClose">
      <el-form :model="xiugaiList" ref="xiugaiFrom">
        <el-form-item label="商品名称">
          <el-input v-model="xiugaiList.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" >
          <el-input v-model="xiugaiList.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input v-model="xiugaiList.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" >
          <el-input v-model="xiugaiList.goods_weight"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="xiugaiEnd">确 定</el-button>
      </span>
    </el-dialog>
    <el-card>
      <!-- sousu -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList">
            <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="goAddpage">添加商品</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="goodsList" border stripe>
        <el-table-column type="index">

        </el-table-column>
        <el-table-column label="商品名称" prop="goods_name" width="600">

        </el-table-column>
        <el-table-column label="商品价格(元)" prop="goods_price" width="80">

        </el-table-column>
        <el-table-column label="商品重量" prop="goods_weight" width="80">

        </el-table-column>
        <el-table-column label="创建时间" prop="add_time" width="175">
          <template slot-scope="scope">{{scope.row.add_time | dateFormat}}</template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="xiugaiGoods(scope.row.goods_id)">
            </el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteGoods(scope.row.goods_id)">
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import Bootstrap from "../../component/component/Bootstrap";
export default {
  name: "",
  components: {
    Bootstrap,
  },
  data() {
    return {
      BootstrapTitle: {
        first: "商品管理",
        second: "/goods",
        third: "商品列表",
      },
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      sousuoInfo: "",
      goodsList: [],
      total: 0,
      dialogVisible: false,
      xiugaiList: {
        add_time: "",
        attrs: [],
        cat_id: "",
        cat_one_id: "",
        cat_three_id: "",
        cat_two_id: "",
        delete_time: null,
        goods_big_logo: "",
        goods_cat: "",
        goods_id: 0,
        goods_introduce: "",
        goods_name: "",
        goods_number: 0,
        goods_price: "",
        goods_small_logo: "",
        goods_state: 0,
        goods_weight: 0,
        hot_mumber: 0,
        is_del: "",
        is_promote: false,
        pics: [],
        upd_time: "",
      },
      goodsid: "",
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    // 商品列表数据
    async getGoodsList() {
      let res = await this.$http.get("goods", { params: this.queryInfo });
      console.log(res);
      if (res.data.meta.status !== 200) {
        return this.$message.error(res.data.meta.msg);
      } else {
        this.$message.success(res.data.meta.msg);
        this.goodsList = res.data.data.goods;
        this.total = res.data.data.total;
      }
    },
    // goAddpage添加商品
    goAddpage() {
      this.$router.push("/goods/add");
    },
    // 监听条数
    handleSizeChange(size) {
      //console.log(size, "size");
      this.queryInfo.pagesize = size;
      this.getGoodsList();
    },
    // 监听页数
    handleCurrentChange(page) {
      // console.log(page, "page");
      this.queryInfo.pagenum = page;
      this.getGoodsList();
    },
    async deleteGoods(id) {
      let confirm = await this.$confirm(
        "此操作将永久删除该商品信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);

      if (confirm !== "confirm") {
        this.$message.error("取消删除");
      } else {
        let res = await this.$http.delete("goods/" + id);
        if (res.data.meta.status !== 200) {
          return this.$message.error(res.data.meta.msg);
        }
        this.$message.success(res.data.meta.msg);
        this.getGoodsList();
      }
    },
    // xiugaiGoods()
    async xiugaiGoods(id) {
      this.goodsid = id;
      this.dialogVisible = true;
      let res = await this.$http.get("goods/" + id);
      console.log(res, "ressssss");
      if (res.data.meta.status !== 200) {
        return this.$message.error(res.data.meta.msg);
      } else {
        this.$message.success(res.data.meta.msg);
        this.xiugaiList.add_time = res.data.data.add_time;
        this.xiugaiList.attrs = res.data.data.attrs;
        this.xiugaiList.cat_id = res.data.data.cat_id;
        this.xiugaiList.cat_one_id = res.data.data.cat_one_id;
        this.xiugaiList.cat_three_id = res.data.data.cat_three_id;
        this.xiugaiList.cat_two_id = res.data.data.cat_two_id;
        this.xiugaiList.delete_time = res.data.data.delete_time;
        this.xiugaiList.goods_big_logo = res.data.data.goods_big_logo;
        this.xiugaiList.goods_cat = res.data.data.goods_cat;
        this.xiugaiList.goods_id = res.data.data.goods_id;
        this.xiugaiList.goods_introduce = res.data.data.goods_introduce;
        this.xiugaiList.goods_name = res.data.data.goods_name;
        this.xiugaiList.goods_number = res.data.data.goods_number;
        this.xiugaiList.goods_price = res.data.data.goods_price;
        this.xiugaiList.goods_small_logo = res.data.data.goods_small_logo;
        this.xiugaiList.goods_state = res.data.data.goods_state;
        this.xiugaiList.goods_weight = res.data.data.goods_weight;
        this.xiugaiList.hot_mumber = res.data.data.hot_mumber;
        this.xiugaiList.is_del = res.data.data.is_del;
        this.xiugaiList.is_promote = res.data.data.is_promote;
        this.xiugaiList.pics = res.data.data.pics;
        this.xiugaiList.upd_time = res.data.data.upd_time;

        // console.log(res.data.data.goods_weight, "res.data.data.goods_weight");
      }
    },
    async xiugaiEnd() {
      // console.log(this.goodsid);
      let par = this.xiugaiList;
      const add_time = par.add_time;
      const attrs = par.attrs;
      const cat_id = par.cat_id;
      const cat_one_id = par.cat_one_id;
      const cat_three_id = par.cat_three_id;
      const cat_two_id = par.cat_two_id;
      const delete_time = par.delete_time;
      const goods_big_logo = par.goods_big_logo;
      const goods_cat = par.goods_cat;
      const goods_id = par.goods_id;
      const goods_introduce = par.goods_introduce;
      const goods_name = par.goods_name;
      const goods_number = par.goods_number;
      const goods_price = par.goods_price;
      const goods_small_logo = par.goods_small_logo;
      const goods_state = par.goods_state;
      const goods_weight = par.goods_weight;
      const hot_mumber = par.hot_mumber;
      const is_del = par.is_del;
      const is_promote = par.is_promote;
      const pics = par.pics;
      const upd_time = par.upd_time;

      let res = await this.$http.put("goods/" + this.goodsid, {
        add_time,
        attrs,
        cat_id,
        cat_one_id,
        cat_three_id,
        cat_two_id,
        delete_time,
        goods_big_logo,
        goods_cat,
        goods_id,
        goods_introduce,
        goods_name,
        goods_number,
        goods_price,
        goods_small_logo,
        goods_state,
        goods_weight,
        hot_mumber,
        is_del,
        is_promote,
        pics,
        upd_time,
      });
      console.log(res, "ressssss");
      if (res.data.meta.status !== 200) {
        return this.$message.error(res.data.meta.msg);
      } else {
        this.dialogVisible = false;
        this.getGoodsList();
        this.$message.success(res.data.meta.msg);
      }
    },
    // xiugaiClose
    xiugaiClose() {
      this.$$refs.xiugaiFrom.resetFields();
    },
  },
};
</script>
<style lang='less' scoped>
.input-with-select {
}

.el-alert{
  margin: 15px 0;
}
</style>